<template>
  <div class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px">
    <div class="relative h-full flex mx-auto">
      <div class="left flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden">
        <div class="flex items-center relative text-white">
          <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
          <span class="text-20px font-bold">易同云管理系统</span>
        </div>
        <div class="flex justify-center items-center h-[calc(100%-60px)]">
          <TransitionGroup
            appear
            tag="div"
            enter-active-class="animate__animated animate__bounceInLeft"
          >
            <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />
            <div class="text-3xl text-white" key="2">欢迎使用本系统</div>
          </TransitionGroup>
        </div>
      </div>
      <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
        <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
          <div class="flex items-center @2xl:hidden @xl:hidden">
            <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
          </div>
        </div>
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div
            class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
          >
            <div class="logincontainer">
              <el-form
                ref="loginFormRef"
                class="loginForm"
                :model="loginModel"
                :rules="rules"
                label-position="top"
                :inline="false"
              >
                <el-form-item>
                  <div class="loginTitle">系统登录</div>
                </el-form-item>
                <el-form-item prop="phone" label="用户名">
                  <el-input v-model="loginModel.phone" placeholder="请输入账户" maxlength="11" />
                </el-form-item>
                <el-form-item prop="code" label="密码">
                  <el-input
                    v-model="loginModel.code"
                    type="code"
                    show-password
                    maxlength="6"
                    placeholder="请输入密码"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="mybtn"
                    type="primary"
                    :loading="loading"
                    @click="login(loginModel)"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { underlineToHump } from '@/utils'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import useBaseLogin from '@/composables/login/useBaseLogin'
import useLoginRequest from '@/composables/login/useLoginRequest'
//基础数据
const { loginModel, rules, loginFormRef } = useBaseLogin()
const { login, loading } = useLoginRequest()
</script>

<style lang="less" scoped>
.left {
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/svgs/login-bg.svg');
    background-position: center;
    background-repeat: no-repeat;
    content: '';
  }
}
.logincontainer {
  height: 100%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .loginForm {
    width: 100%;
    border-radius: 10px;
    padding: 20px 35px;
    box-shadow: 0 0 25px #cac6c6;
    .loginTitle {
      font-size: 24px;
      font-weight: 600;
      display: flex;
      margin-top: 10px;
      justify-content: center;
      align-items: center;
    }
    .mybtn {
      width: 100%;
      margin: 20px;
    }
  }
}
</style>
